<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>无标题文档</title>
		<!--框架必需start-->
		<script type="text/javascript" src="../../libs/js/jquery.js"></script>
		<script type="text/javascript" src="../../libs/js/language/cn.js"></script>
		<script type="text/javascript" src="../../libs/js/framework.js"></script>
		<link href="../../libs/css/import_basic.css" rel="stylesheet" type="text/css" />
		<link rel="stylesheet" type="text/css" id="skin" prePath="../../" />
		<link rel="stylesheet" type="text/css" id="customSkin" />
		<!--框架必需end-->
		<link rel="stylesheet" type="text/css" href="style/style.css" />

		<script src="../../libs/js/table/quiGrid.js" type="text/javascript"></script>
		<script type="text/javascript" src="../../libs/js/form/datePicker/WdatePicker.js"></script>
		
	</head>

	<body>
		<div class="page_content">
			<div class="infoCard infoCard2" style="">
				<div class="title">
					<span>撤销单录入</span>
				</div>
				<table border="0" cellspacing="0" cellpadding="0" class="account_win">
					<tr>
						<td style="text-align: left;">
							<p>报销单号</p>
							<input type="text" name="" id="" value="" style="width: 100%;"/>
						</td>
						<td style="text-align: left;">
							<p>报销日期</p>
							<input type="text" class="date"  style="width: 100%;"/>
						</td>
						<td style="text-align: left;">
							<p>制单人</p>
							<input type="text" name="" id="" value="" style="width: 100%;"/>
						</td>
					</tr>
					<tr>
						<td style="text-align: left;">
							<p>请款人</p>
							<input type="text" name="" id="" value="" style="width: 100%;"/>
						</td>
						<td style="text-align: left;">
							<p>部门</p>
							<input type="text" class="date"  style="width: 100%;"/>
						</td>
						<td style="text-align: left;"></td>
					</tr>
					<tr>
						<td style="text-align: left;" colspan="3">
							<p>备注</p>
							<textarea style="width: 100%;"></textarea>
						</td>
					</tr>
					<tr>
						<td style="text-align: left;" colspan="3">
							<input type="button" value="新增条目" class="primary" onclick="appendLastRow();" />
						</td>
					</tr>
				</table>
				<div id="dataBasic"></div>
				<table border="0" cellspacing="0" cellpadding="0" class="total_win">
					<tr>
						<td style="text-align: right;">
							<p>合计：<em>¥222</em></p>
						</td>
					</tr>
				</table>
				<table border="0" cellspacing="0" cellpadding="0" class="account_bottom">
					<tr>
						<td>
							<input type="button" value="取 消" class=""  onclick="window.location='oa_14.html'"/>
							<input type="button" value="保 存" class="primary"  onclick="window.location='oa_14.html'"/>
							<input type="button" value="提 交" class="primary"  onclick="window.location='oa_14.html'"/>
						</td>
					</tr>
				</table>
			</div>
		</div>

		<script type="text/javascript">
			var grid = null;
			//数据表格使用
			var gridData = {
				"form.paginate.pageNo": 1,
				"form.paginate.totalRows": 13,
				"rows": [{
					"Name": "测试1",
					"Money": "222",
					"Abstracts": "测试2"
				},{
					"Name": "测试1",
					"Money": "222",
					"Abstracts": "测试2"
				},{
					"Name": "测试1",
					"Money": "222",
					"Abstracts": "测试2"
				},{
					"Name": "测试1",
					"Money": "222",
					"Abstracts": "测试2"
				}
				]
			}

			function initComplete() {
				grid = $("#dataBasic").quiGrid({
					columns: [
						{
							display: '费用科目名称',
							name: 'Name',
							width: "50%"
						},
						{
							display: '金额',
							name: 'Money',
							width: "20%"
						},
						{
							display: '摘要及用途',
							name: 'Abstracts',
							width: "30%"
						},
						{
							display: '操作',
							name: 'name',
							align: 'center',
							width: 120,
							render: function(rowdata, rowindex, value, column) {
								var mainCon = $('<div></div>');
								var con = $('<div class="popupMenu"><div class="popupMenu_link"><a href="javascript:;" class="themeBgColor">操作</a></div><div class="popupMenu_con white_con"><a href="javascript:;" onclick="onEdit(' + rowdata.id + ')"><span>编辑</span></a><a href="javascript:;" onclick=""><span>打印</span></a><a href="javascript:;" onclick=""><span>审批过程</span></a></div></div>');
								mainCon.append(con);
								return mainCon.html();
							}
						}
					],
					data: gridData,
					sortName: 'id',
					rownumbers: false,
					checkbox: false,
					height: '300px',
					width: "100%",
					pageSize: 10,
					usePager: false,
					percentWidthMode: true,
					onAfterShowData: onAfterShowData

				});
			}
			//修改
			function onEdit(rowid) {
				top.Toast("showNoticeToast", "编辑的记录Id是:" + rowid );
			}

			

			function onAfterShowData(data) {

				$("#dataBasic").find(".popupMenu").each(function() {
					$(this).hover(function() {
						$(this).find(".popupMenu_con").show();
					}, function() {
						$(this).find(".popupMenu_con").hide();
					});
				})
			}
			//追加尾行
			function appendLastRow(){
				var rowdata = {
		            "Name": "新加内容",
					"Money": "0",
					"Abstracts": "填写摘要及用途"
		        };
		        grid.add(rowdata);
			}

		</script>
	</body>

</html>